<template>
    <view class="bg_img_list">
        <view class="header-bar">
            <text style="color: white;">背景图片</text>
        </view>
        <view class="bg_img_view">
            <view class="bg_img_dan" v-for="(item,index) in bgImgList" :key="index">
                <img class="img"  :src="item.img" alt="">
                <view class="ckeckbox" @click="()=>{changeBgImg(item)}">
                     <img v-if="item.state" src="/src/icon/dui.png" class="icon" alt="">
                    <!-- <span v-if="item.state">√</span> -->
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import type {BgImgCate} from '@/types/BgImg'
import { reactive } from 'vue';
import { useCounterStore } from '@/store/counter'
const counterStore = useCounterStore()

const props = defineProps<{
    list:BgImgCate[]
}>()
const bgImgList = reactive([...props.list]);
const changeBgImg = (ItemVal) => {
    counterStore.changeBgImg(ItemVal.img)
  const idx = bgImgList.findIndex(item => item.img === ItemVal.img);
  bgImgList.forEach((item, i) => {
    if(i==idx){
        item.state = true
    }else{
        item.state = false
    }
  });
  console.log(bgImgList);
  
};



const goBack = () => {
    console.log(1111);
    
  uni.switchTab({
    url: '/pages/my/my'
  });
};
</script>
<style scoped>
.header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

.icon-fanhui {
  font-size: 24px;
  color: white;
  padding: 5px;
}
.bg_img_list{
    width: 100%;
    padding: 5vw;
    background-color: #532269;
    box-sizing: border-box;
    margin-top: 2vh;
    border-radius: 3vw;
  
}
.bg_img_list .bg_img_view{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow-y: scroll;
    }
.bg_img_dan{
    width: 47%;
    height: 30vh;
    margin-top: 5vw;
    position: relative;
}
.img{
    width: 100%;
    height: 30vh;
}
.ckeckbox{
    position: absolute;
    width: 5vw;
    height: 5vw;
    right: 1vw;
    top:1vw;
    background-color: white;
    line-height: 5vw;
    text-align: center;
}
.icon-duihao{
    font-size: 5vw;
    color: #45c01a;
    font-weight: bold;
}
.icon{
    width: 5vw;
    height: 5vw;
}
</style>